<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/static/codemirror/lib/codemirror.css" />
<link rel="stylesheet" href="/static/uikit/css/uikit.min.css" />
<script src="/static/codemirror/lib/codemirror.js"></script>
<script src="/static/codemirror/mode/xml/xml.js"></script>
<script src="/static/codemirror/mode/javascript/javascript.js"></script>
<script src="/static/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<script src="/static/uikit/js/jquery-2.2.4.min.js"></script>
<script src="/static/uikit/js/jquery.fileDownload.min.js"></script>

<title>在线HTML代码编辑器</title>
<style>
html,body {
	width:100%;
	height:97%;
	padding:3px;
}

.CodeMirror {
	float: left;
	width: 50%;
	height: 90%;
	border: 1px solid #f3f3f3;
}

iframe {
	width: 49%;
	float: left;
	height: 90%;
	border: 1px solid #f3f3f3;
	border-left: 0px;
}
</style>
</head>
<body>
	<div>
		<button onclick="updatePreview();" class="uk-button uk-button-success uk-button-small">运行代码</button>
		<button onclick="downloadHtmlFile();" class="uk-button uk-button-small">下载文件</button>
	</div>
	<div style="margin-top: 5px; height: 100%;">
		{%csrf_token%}
		<textarea id="code" name="code">{{algorithm.html_text}}</textarea>
		<iframe id="preview"></iframe>
		<script>
		    var instance_id="{{ algorithm.instance_id }}";
		    
			var editor = CodeMirror.fromTextArea(document
					.getElementById('code'), {
				lineNumbers : true,
				smartIndent : true,
				matchBrackets : true,
				indentUnit : 4,
				indentWithTabs : true,
				lineWrapping : true,
				autofocus : true,
				mode : 'text/html'
			});

			function updatePreview() {
				var previewFrame = document.getElementById('preview');
				var preview = previewFrame.contentDocument
						|| previewFrame.contentWindow.document;
				preview.open();
				preview.write(editor.getValue());
				preview.close();
			}
			
			updatePreview();
			
			function downloadHtmlFile(){
				$.fileDownload("/data_visualization/download_html_file/",{
					  httpMethod: 'post',
					  data:{
						"csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
					    "instance_id":instance_id,
					    "code":$("#code").val()
					  }
					});
			}
		</script>
	</div>
	<!--底部版权-->
	<div style="text-align: center;">
		<p class="uk-text-medium">福州职业技术学院</p>
	</div>
</body>
</html>